body {
    font: 12px '微软雅黑', Arial, '宋体';

    a {
        color: #333;
    }

    .align {
        width: 1000px;
        margin: 0 auto;
    }
    .radius3{
        width: 120px;
        height: 120px;
        display: block;
        background: url(https://portal.ucgc.ucfly.com/public/images/pc/pc_new/img_radius.png) no-repeat 0 0;
        background-repeat: no-repeat;
        background-position: 0 -330px;
        position: absolute;
        left: 0;
        top: 0;
    }
    .page-break{
        margin-bottom: 10px;
        color: #999;
        line-height: 12px;
        a{
            padding: 4px;
        }
        span{
            color: #999;
            padding: 0 4px
        }
    }
    // 游戏分类
    .game-classify-con{
        padding-top: 20px;
        border-top: 1px solid #f5f5f5;
        margin-bottom: 30px;
        .box-text {
            padding-top: 20px;
        }
        .cans {
            width: 148px;
            height: 68px;
            margin: 10px 0 0 12px;
            position: relative;
            border: 1px solid #e6e6e6;        
            &:hover {
                background-color: #ffba00;
                border-color: #ffa800;
            }

            &:hover a {
                color: #fff;
            }

            &:hover .num {
                color: #fff;
            }

            &:hover .des {
                color: #fff;
            }

            a {
                width: 100%;
                display: block;
                font-size: 18px;
                text-indent: 10px;
                line-height: 28px;
                font-weight: 400;
                position: relative;
            }

            .num {
                font-size: 14px;
                color: #ff8a00;
                position: absolute;
                right: 10px;
                top: 6px;
                cursor: pointer;
            }

            .des {
                font-size: 14px;
                color: #999;
                position: absolute;
                left: 10px;
                bottom: 5px;
                cursor: pointer;
            }
        }
        .can-green {
            background: #1ac269;
            border-color: #06b85d;
            a {
                color: #fff;
            }
            .num {
                color: #fff;
            }
            .des {
                color: #fff;
            }
        }
        .can-pink {
            background: #f4689d;
            border-color: #f15f97;
            a {
                color: #fff;
            }
            .num {
                color: #fff;
            }
            .des {
                color: #fff;
            }
        }
        .can-red {
            background: #ff784f;
            border-color: #ff683b;
            a {
                color: #fff;
            }
            .num {
                color: #fff;
            }
            .des {
                color: #fff;
            }
        }
        .can-blue {
            background: #60afe7;
            border-color: #49a3e3;
            a {
                color: #fff;
            }
            .num {
                color: #fff;
            }
            .des {
                color: #fff;
            }
        }
        .class-con{
            margin-bottom: 20px;
            .little-tit{
                position: relative;
                height: 30px;
                margin-bottom: 10px;
                h3{
                    position: relative;
                    display: inline-block;
                    padding: 0 6px;
                    left: 15px;
                    top: 10px;
                    font-size: 16px;
                    line-height: 16px;
                    border-left: 2px solid #f60;
                    cursor: default
                }
            }
            .class-text{
                display: flex;
                flex-wrap: wrap;
                .left{
                    width: 648px;
                    display: flex;
                flex-wrap: wrap; 
                }
                .right{
                    display: flex;
                    width: 325px;
                    .cans-big{
                        width: 148px;
                        height: 148px;
                        margin: 10px 0 0 12px;
                        position: relative;
                        border: 1px solid #e6e6e6;
                        &:hover{
                            background-color: #ffba00;
                            border-color: #ffa800;
                        }
                        
                        a {
                            width: 100%;
                            height: 148px;
                            display: block;
                            font-size: 18px;
                            text-indent: 10px;
                            line-height: 28px;
                            font-weight: 400;
                            position: relative;
                            color: #fff;
                        }
                        .num{
                            font-size: 14px;
                            color: #fff;
                            position: absolute;
                            left: 10px;
                            top: 30px;
                            cursor: pointer;
                        }
                        .des{
                            font-size: 14px;
                            color: #fff;
                            position: absolute;
                            left: 10px;
                            bottom: 5px;
                            cursor: pointer;
                        }
                    }
                    .can-jade{
                        background: #2bbdc4;
                        border-color: #17afb6;
                    }
                    .can-purple{
                        background: #868cd8;
                        border-color: #7b89da;
                    }
                }
            }
        }
    }
    // 新品榜
    .game-rank-con{
        .box-text{
            padding: 20px 15px;
            .one-tab-con{
                height: 36px;
                margin-bottom: 20px;
                background: #fafafa;
                border-bottom: 1px solid #ebebeb;
                display: flex;
                li{
                    width: 20%;
                    height: 46px;
                    line-height: 16px;
                    text-align: center;
                    cursor: pointer;
                    .title {
                        margin: 10px 0;
                        display: block;
                        font-weight: 400;
                        font-size: 16px;
                        border-right: 1px solid #dedede;
                    }
               
                }
                .block{
                    background: url(./../imga/game_search_tab.png) no-repeat center bottom;
                    .title {
                        color: #f80;
                    }
                }
            }
            .text-tab-con{
                height: 564px;
                .rank-poker {
                    display: none;
                    margin-left: -15px;
                    // display: flex;
                    flex-wrap: wrap;
                    li{
                        width: 178px;
                        margin: 0 0 15px 15px;
                        border: 1px solid #ebebeb;
                        position: relative;
                        .corner {
                            width: 55px;
                            height: 55px;
                            background: url(./../imga/corner_bg.png) no-repeat 100px 100px;
                            position: absolute;
                            top: -4px;
                            left: -4px;
                            z-index: 5;
                        }
                        .img {
                            width: 120px;
                            height: 120px;
                            margin: 14px auto 0;
                            position: relative;
                            display: block;
                            img{
                                width: 100%;
                                height: 100%;
                                display: block;
                            }
                        }
                        .name{
                            width: 90%;
                            padding: 0 5%;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            line-height: 42px;
                            font-size: 16px;
                            text-align: center;
                        }
                        .type{
                            color: #999;
                            line-height: 22px;
                            text-align: center;
                            cursor: default;
                        }
                        .fav{
                            margin: 3px 0 10px 0;
                            height: 15px;
                            text-align: center;
                            font-size: 0;
                            cursor: default;
                            span{
                                display: inline-block;
                                width: 15px;
                                height: 15px;
                                background: url(https://www.9game.cn/public/images/pc/pc_new/pcnew_ico.png) no-repeat 100px -100px;
                            }
                            .good{
                                background-position: 0px -283px;
                            }
                            .bad {
                                background-position: -50px -283px;
                            }
                        }
                        .down{
                            width: 86px;
                            height: 28px;
                            display: block;
                            margin: 0 auto 15px;
                            line-height: 28px;
                            text-align: center;
                            font-size: 14px;
                            border: 1px solid #ccc;
                            border-radius: 4px;
                            &:hover {
                                color: #fff;
                                background: #ff8a00;
                                border-color: #ff8a00;
                            }
                        }
                    }
                }
                .new1{
                    li{ @for $i from 1 to 10 {
                        &:nth-child(#{$i}) .corner{
                            background-position:(($i)-1)*(-55px) 0px;
                        }
                    }}
                }
                .new2{
                    li{ @for $i from 1 to 10 {
                        &:nth-child(#{$i}) .corner{
                            background-position:(($i)-1)*(-55px) -55px;
                        }
                    }}
                }
                .new3{
                    li{ @for $i from 1 to 10 {
                        &:nth-child(#{$i}) .corner{
                            background-position:(($i)-1)*(-55px) -110px;
                        }
                    }}
                }
                .new4{
                    li{ @for $i from 1 to 10 {
                        &:nth-child(#{$i}) .corner{
                            background-position:(($i)-1)*(-55px) -165px;
                        }
                    }}
                }
                .current{
                    display: flex;
                }
            }
        }
    }
    // 新游体验区
    .game-try-con{
        margin-bottom: 35px;
        .box-text{
            padding-top: 5px;
            .try-text-con{
                display: flex;
                flex-wrap: wrap;
                li{
                    width: 308px;
                    height: 210px;
                    margin: 15px 0 0 15px;
                    border: 1px solid #ebebeb;
                    .t-box-1{
                        margin: 15px 0 20px 10px;
                        height: 90px;
                        position: relative;
                        display: flex;
                        .img{
                            width: 90px;
                            height: 90px;
                            margin-right: 10px;
                            a {
                                width: 90px;
                                height: 90px;
                                position: relative;

                                img {
                                    width: 90px;
                                    height: 90px;
                                }
                            }
                        }
                        .text-con{
                            width: 190px;
                            margin-top: 2px;
                           .title{
                            font-size: 18px;
                            font-weight: 400;
                            line-height: 18px;
                            margin-bottom: 10px;
                           }
                           .text{
                            color: #666;
                            line-height: 20px;
                            cursor: default;
                            .tit{
                                color: #999;
                            }
                           }
                        }
                    }
                    .t-box-2{
                        margin-left: 10px;
                        height: 70px;
                        display: flex;
                        .gift-con{
                            width: 140px;
                            margin-right: 10px;
                            .gift{
                                height: 30px;
                                margin-bottom: 10px;
                                text-indent: 12px;
                                font-size: 14px;
                                line-height: 30px;
                                background: #fafafa;
                                white-space: nowrap;
                                overflow: hidden;
                                cursor: default;
                                .ora{
                                    color: #ff8a00;
                                    font-size: 14px;
                                }
                            }
                        }
                        .btn-con{
                            width: 140px;
                            .btn{
                                width: 136px;
                                height: 28px;
                                display: block;
                                line-height: 28px;
                                text-align: center;
                                font-size: 16px;
                                margin: 0 10px 10px 0;
                                border: 1px solid #ccc;
                                border-radius: 4px;
                            }
                            .no{
                                color: #ccc;
                                background: #f2f2f2;
                                border-color: #f2f2f2;
                                cursor: default;
                            }
                            .green{
                                &:hover{
                                    color: #fff;
                                    background: #a3ce0e;
                                    border-color: #a3ce0e;
                                }
                            }
                            .red{
                                &:hover{
                                    color: #fff;
                                    background: #ff622b;
                                    border-color: #ff622b;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}